<template>
  <div :class="`cbm-btn ${'cbm-btn--'+props.type}`" @click="onClick">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, withDefaults } from 'vue'

const props = withDefaults(
  defineProps<{
    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger'
    plain?: boolean
  }>(),
  {
    type: 'default',
  },
)

const emits = defineEmits<{(e:'click'):void
}>()

function onClick() {
  emits('click')
}

</script>
<style scoped lang="scss">
.cbm-btn{
  padding: 6px 10px;
  background-color: #eee;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
.cbm-btn:hover{
  opacity: .8;
  transition: opacity .1s;
}
.cbm-btn--primary{
  background-color: #409eff;
  color: #fff;
}
.cbm-btn--success{
  background-color: #67c23a;
  color: #fff;
}
.cbm-btn--warning{
  background-color: #e6a23c;
  color: #fff;
}
.cbm-btn--danger{
  background-color: #f56c6c;
  color: #fff;
}
</style>